<template>
	<view class="app-container">
		<view class="search-box">
			<uni-search-bar v-model="queryParams.keywords" radius="100" placeholder="请输入店名搜索" bg-color="#FFFFFF" clearButton="none"
				cancelButton="none" @confirm="handleSearch" />
		</view>
		<z-paging ref="paging" class="hotel-list flex-1" :fixed="false" v-model="hotelList" :auto="false"
			@query="getBarList">
			<ListItem v-for="item in hotelList" :key="item.id" :type="1" :data="item" class="list-item-box" />
		</z-paging>
	</view>
</template>

<script setup>
	import {
		listBarOrHotel
	} from "@/api";
	import {
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';

	const paging = ref(null);

	const state = reactive({
		queryParams: {
			page: 1,
			limit: 10,
			lat: "",
			lng: "",
			cate: 2,
			keywords: ""
		},
		hotelList: []
	});

	const {
		queryParams,
		hotelList
	} = toRefs(state);

	// 获取附近网吧列表
	async function getBarList(pageNum, pageSize) {
		queryParams.value.page = pageNum;
		queryParams.value.limit = pageSize;
		const res = await listBarOrHotel(queryParams.value);
		res.data.data.forEach(item => {
			item.flags = item.flags ? item.flags.split(",") : ""
		})
		paging.value.complete(res.data.data);
	}
	
	// 搜索按钮操作
	function handleSearch() {
		paging.value.reload()
	}
	
	onLoad((option) => {
		queryParams.value.keywords = option.keywords || '';
	})

	onReady(() => {
		if (uni.getSystemInfoSync().platform === "devtools") {
			// 微信开发者工具无法获取定位
			paging.value.reload()
			return;
		}
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				queryParams.value.lat = res.latitude.toFixed(6);
				queryParams.value.lng = res.longitude.toFixed(6);
				paging.value.reload()
			},
			fail: (err) => {
				uni.showToast({
					title: "获取定位失败",
					icon: "none"
				})
			}
		});
	})
</script>

<style scoped lang="scss">
	.app-container {
		
		.search-box {
			padding: 20rpx 30rpx;
		}
		
		.hotel-list {
			overflow-y: auto;
			padding: 0 20rpx;
		}
	}
</style>